<!--
 * @author: 十一
 * @since: 2024-08-27
 * permissions-manage.vue
 * @desc: new page
-->
<template>
  <!-- <a-card> 菜单管理（待完善） 🍓🍇🍈🍉 </a-card> -->
  <a-card>
    <a-row>
      <a-col :span="4" v-for="(item, index) in iconClasses.glyphs" :key="index">
        <div
          class="icon-item flex items-center flex-col p-5 pt-2 pb-2"
          @click="copyText(item.font_class)"
        >
          <i :class="'iconfont icon-' + item.font_class"></i>
          <span class="mb-2">{{ item.name }}</span>
          <span>icon-{{ item.font_class }}</span>
        </div>
      </a-col>
    </a-row>
  </a-card>
</template>

<script lang="ts" setup>
import iconClasses from "@/assets/icons/iconfont.json";
import { message } from "ant-design-vue";
import Clipboard from "clipboard";
const copyText = (hex: string) => {
  const clipboard = new Clipboard(".btn-copy", {
    text: () => `icon-${hex}`,
  });

  clipboard.on("success", () => {
    message.success("复制成功");
    clipboard.destroy();
  });

  clipboard.on("error", () => {
    message.error("复制失败");
    clipboard.destroy();
  });
  clipboard.onClick(event);
};
</script>

<style scoped>
.icon-item {
  border: 1px solid #f2f2f2;
  margin: 5px;
  cursor: pointer;
}
.icon-item:hover {
  background: #f2f2f2;
  color: #409eff;
}
.iconfont {
  font-size: 36px;
}
</style>
